<template>
  <div class="content">
    <div class="top">
      <h2>就业岗位分布</h2>
      <el-card class="post">
        <div class="zhanshi">
          <div id="pieReport" class="left"></div>
          <div class="right">
            <el-card>
              <div class="empTitle">
                <h3>
                  <span>{{ detailInfo.detailPos }}</span
                  ><span>{{ detailInfo.rate }}%</span>
                </h3>
              </div>
              <div class="main">
                <div class="title">
                  <div><strong>具体职位：</strong></div>
                  <span>{{ detailInfo.detailJob }}</span>
                </div>
                <div class="hangye">
                  <div><strong>所在行业：</strong></div>
                  <span>{{ detailInfo.name }}</span>
                </div>
              </div>
            </el-card>
          </div>
        </div>
      </el-card>
    </div>
    <div class="bottom">
      <h2>专业就业</h2>
      <el-card>{{ jobDirection }}</el-card>
    </div>
  </div>
</template>

<script>
import qs from "qs";
// 引入基本模板
let echarts = require("echarts/lib/echarts");
// 引入饼状图组件
require("echarts/lib/chart/pie");
// 引入提示框和title组件
require("echarts/lib/component/tooltip");
require("echarts/lib/component/title");
export default {
  components: {},
  data() {
    return {
      active: 0,
      // 右边显示的内容
      detailInfo: {
        detailPos: "",
        rate: "",
        name: "",
        detailJob: "",
      },
      // value 和 name
      nameData: [],
      nameAndValueData: [],
      pieData: [
        {
          detailPos: "后端开发",
          rate: "14.20%",
          name: "办公用品, 保险, 餐饮娱乐, 电力水利",
          detailJob:
            "java开发工程师， 研发工程师，互联网软件开发工程师，软件研发工程师，软件工程师，ERP技术/开发应用，高级软件工程师，技术经理，软件开发，多媒体/游戏开发工程师",
        },
      ],
      jobDirection: "",
    };
  },
  methods: {
    // 动态饼状图
    initData() {
      var myChart = echarts.init(document.getElementById("pieReport"));
      myChart.setOption({
        tooptip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          orient: "vertical",
          bottom: "bottom",
          data: this.nameData,
        },
        series: [
          {
            type: "pie",
            radius: "55%",
            center: ["50%", "45%"],
            avoidLabelOverlap: false,
            data: this.nameAndValueData,
            itemStyle: {
              emphasis: {
                show: true,
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
                textStyle: {
                  fontSize: "30",
                  fontWeight: "bold",
                },
              },
              normal: {
                label: {
                  show: true,
                  formatter: "{b} : {d}%",
                },
                labelLine: { show: true },
              },
            },
          },
        ],
      });
      var _this = this;
      myChart.on("click", function (params) {
        console.log(params);
        console.log(_this.nameData);
        if (_this.nameData.length > 0) {
          for (let i = 0; i < _this.nameData.length; i++) {
            if (_this.nameData[i] === params.data.name) {
              _this.detailInfo = _this.pieData[i];
            }
          }
        }
      });
    },
  },
  created() {
    console.log(this.$route);
    this.$axios.get("/majorJob/" + this.$route.params.id).then((res) => {
      console.log(res);
      this.pieData = res.data;
      let data = res.data;
      var array = [];
      data.forEach((element) => {
        array.push({
          name: element.detailPos,
          value: element.rate,
        });
        this.nameData.push(element.detailPos);
      });
      this.nameAndValueData = array;
      this.initData();
      this.detailInfo = this.pieData[0];
      console.log(this.pieData);
    });
    this.$axios.get("/major/" + this.$route.params.id).then((res) => {
      this.jobDirection = res.data.job;
    });
  },
};
</script>

<style  scoped>
h2 {
  font-size: 20px;
  font-weight: 700;
  margin: 2vh 1.5vw;
}

.content {
  display: flex;
  flex-direction: column;
}

.top {
  height: 74.8vh;
}

.bottom {
  height: 32.5vh;
}

.zhanshi {
  display: flex;
}

#pieReport {
  width: 40.8vw;
  height: 56.9vh;
  margin-right: 0.7vw;
}

.right /deep/ .el-card {
  margin-left: 2vw;
  width: 40.8vw;
  height: 56.9vh;
  display: flex;
  flex-direction: column;
}

.empTitle h3 {
  font-size: 18px;
  font-weight: bold;
  display: block;
  width: 13.3vw;
  margin: 1.6vh auto;
}

.empTitle h3 span:last-child {
  margin-left: 10px;
}

.empTitle {
  width: 100%;
  height: 9.8vh;
  margin: 0 auto;
}

.main {
  display: flex;
  flex-direction: column;
}

.title {
  margin-top: 1.6vh;
  margin-bottom: 3.3vh;
}

.title div {
  margin-bottom: 1.6vh;
}

.hangye div {
  margin-bottom: 1.6vh;
}
</style>